<template>
    <el-container>
        <el-header style="text-align: right; font-size: 12px">
            <el-row>
                <el-button
                        style="position: absolute; right: 10px"
                        @click="createArticle"
                >新建
                </el-button
                >
            </el-row>
        </el-header>
        <el-main>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%"
                    @current-change="showArticle"
            >
                <el-table-column prop="articleName" label="文章名称"/>
                <el-table-column prop="articleTag" label="文章标签"/>
                <el-table-column prop="managerName" label="作者"/>
                <el-table-column prop="createTime" label="创建时间"/>
                <el-table-column prop="articleType" label="类型"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button-group>
                            <el-button type="warning" @click.stop="editArticle(scope.row)"
                            >编辑
                            </el-button
                            >
                            <el-button type="danger" @click.stop="deleteArticle(scope.row)"
                            >删除
                            </el-button
                            >
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    small="true"
                    layout="prev, pager, next"
                    :total="recordCount"
                    @current-change="changePageNumber"
            >
            </el-pagination>
        </el-main>
    </el-container>

    <el-dialog
            title="提示"
            v-model="centerDialogVisible"
            width="30%"
            center>
        <p style="text-align: center">确认是否删除</p>
        <template #footer>
            <span class="dialog-footer">
              <el-button @click="cancelDelete">取 消</el-button>
              <el-button type="primary" @click="confirmDelete">确 定</el-button>
            </span>
        </template>

    </el-dialog>
</template>
<script>
    import ArticleApi from "/src/assets/api/articleApi";

    export default {
        name: "ArticleList",
        data() {
            return {
                pageCount: 1,
                pageSize: 10,
                pageNumber: 1,
                recordCount: 10,
                tableData: [],
                centerDialogVisible: false,
                deleteId: -1,
            };
        },
        mounted() {
            this.getData();
        },
        methods: {
            async getData(currentPage) {
                this.pageNumber = currentPage ? currentPage : 1;
                const res = await ArticleApi.getArticleList(
                    this,
                    this.pageSize,
                    this.pageNumber
                );
                this.tableData = res.data.data.list;
                this.pageNumber = res.data.data.pager.pageNumber;
                this.pageSize = res.data.data.pager.pageSize;
                this.pageCount = res.data.data.pager.pageCount;
                this.recordCount = res.data.data.pager.recordCount;
            },
            changePageNumber(pageNumber) {
                this.pageNumber = pageNumber;
                this.getData(pageNumber);
            },
            showArticle(currentRow) {
                this.$router.push({
                    name: "article",
                    params: {
                        articleStr: JSON.stringify(currentRow),
                        content: currentRow.articleMdContent,
                        obj: currentRow,
                    },
                });
            },
            createArticle() {
                this.$router.push("/article");
            },
            editArticle(tar) {
                this.$router.push({
                    name: "article",
                    params: {
                        articleStr: JSON.stringify(tar),
                        edit: 1,
                    },
                });
            },
            deleteArticle(tar) {
                this.centerDialogVisible = true;
                this.deleteId = tar.id;
            },
            async confirmDelete() {
                const res = await ArticleApi.deleteArticle(this, this.deleteId);
                if (res) {
                    this.$router.go(0);
                }
                this.centerDialogVisible = false;
                this.deleteId = -1;
            },
            cancelDelete() {
                this.centerDialogVisible = false;
                this.deleteId = -1;
            }
        },
    };
</script>
<style scoped>
    .el-dialog__body {
        text-align: center;
    }
</style>